<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"/>
    <scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll">
      <detail-swiper :swiperImages="topImages"></detail-swiper>
      <detail-goods-info :goods="this.goods"></detail-goods-info>
      <detail-shop-info :shop="this.shop"></detail-shop-info>
      <detail-goods-infot :detail-info="this.detailInfo" @imageLoad="imageLoad"></detail-goods-infot>
      <detail-param-info :param-info="this.paramInfo" ref="params"></detail-param-info>
      <detail-comment-info :comment-info="this.commentInfo" ref="comment"></detail-comment-info>
      <goods-list2 :goods="this.recommends" ref="recommend"></goods-list2>  
    </scroll>
    <detail-bottom-bar @addToCart="addToCart"/>
    <back-top @click.native="backClick" v-show="isShow"/>
    <toast :message="message" :show="show"/>
  </div>  
</template>

<script>

import DetailNavBar from "./components/DetailNavBar.vue";
import { getDetail, Goods, Shop, GoodsParam, getRecommend} from "@/network/detail.js";
import DetailSwiper from "@/components/common/DetailSwiper.vue";
import DetailGoodsInfo from "./components/DetailGoodsInfo.vue";
import DetailShopInfo from "./components/DetailShopInfo.vue";
import DetailGoodsInfot from "./components/DetailGoodsInfot.vue";
import DetailParamInfo from "./components/DetailParamInfo.vue";
import DetailCommentInfo from "./components/DetailCommentInfo.vue";
import GoodsList2 from "@/components/common/GoodsList2";
import BackTop from "@/components/private/BackTop";
import DetailBottomBar from "./components/DeatilBottomBar.vue";
import Toast from "@/components/common/Toast.vue";

import Scroll from '@/components/common/Scroll.vue';

export default {
  name:"Detail",
  components: {
   DetailNavBar,
   DetailSwiper,
   DetailGoodsInfo,
   DetailShopInfo,
   DetailGoodsInfot,
   DetailParamInfo,
   DetailCommentInfo,
   GoodsList2,
   DetailBottomBar,
   BackTop,
   Scroll,
   Toast,
  },
  data(){
    return{
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      themeTopY: [0, 1000, 2000, 3000],
      currentIndex: 0,
      isShow:false,
      message: '',
      show: false
    }
  },
  // updated () {
  //   this.themeTopY = [];
  //   this.themeTopY.push(0);
  //   this.themeTopY.push(this.$refs.params.$el.offsetTop);
  //   this.themeTopY.push(this.$refs.comment.$el.offsetTop);
  //   this.themeTopY.push(this.$refs.recommend.$el.offsetTop);
  //   console.log(this.themeTopY)
  // },
  created () {
    this.iid = this.$route.params.id
    getDetail(this.iid).then(res=>{
      // console.log(res);
      this.topImages = res.result.itemInfo.topImages
      // console.log(this.topImages)
      this.goods = new Goods(res.result.itemInfo, res.result.columns, res.result.shopInfo.services)
      console.log(this.goods)
      this.shop = new Shop(res.result.shopInfo)
      // console.log(this.shop)
      this.detailInfo = res.result.detailInfo
      // console.log(this.detailInfo)
      this.paramInfo = new GoodsParam(res.result.itemParams.info,res.result.itemParams.rule)
      // console.log(this.paramInfo)
      if (res.result.rate !== 0){
        this.commentInfo = res.result.rate.list[0]
      }

      // this.$nextTick(() => {
      //   this.themeTopY = [];
      //   this.themeTopY.push(0);
      //   this.themeTopY.push(this.$refs.params.$el.offsetTop);
      //   this.themeTopY.push(this.$refs.comment.$el.offsetTop);
      //   this.themeTopY.push(this.$refs.recommend.$el.offsetTop);
      //   console.log(this.themeTopY)
      // })

    })

    getRecommend().then(res=>{
      this.recommends = res.data.list
      // console.log(this.recommends)
    })

    // this.getThemeTopY = debounce(() => {
    //     this.themeTopY = []
    //     this.themeTopY.push(0);
    //     this.themeTopY.push(this.$refs.params.$el.offsetTop);
    //     this.themeTopY.push(this.$refs.comment.$el.offsetTop);
    //     this.themeTopY.push(this.$refs.recommend.$el.offsetTop);
    //     console.log(this.themeTopY)
    //   })

  },
  methods: {
    imageLoad(){
        // this.$refs.scroll.scroll.refresh();
        // this.newRefresh();
        this.themeTopY = []
        this.themeTopY.push(0);
        this.themeTopY.push((this.$refs.params.$el.offsetTop)-44);
        this.themeTopY.push((this.$refs.comment.$el.offsetTop)-44);
        this.themeTopY.push((this.$refs.recommend.$el.offsetTop)-44);
        // console.log(this.themeTopY)
    },
    backClick(){
      this.$refs.scroll.scroll.scrollTo(0,0,1000)
    },
    titleClick(index) {
      console.log(index)
      this.$refs.scroll.scroll.scrollTo(0, -this.themeTopY[index], 500)
    },
    contentScroll(position){
				//返回顶部是否显示
				this.isShow = position.y < -1000
				const positionY = -(position.y);
				let _lenth = this.themeTopY.length;
				for(let i=0; i<_lenth-1; i++){
					if(this.currentIndex !== i && (positionY >= this.themeTopY[i] && positionY < this.themeTopY[i+1])){
						this.currentIndex = i;
            // console.log(this.currentIndex)
						this.$refs.nav.currentIndex = this.currentIndex;
					}
				}
			},
      addToCart() {
        const product = {};
        product.image = this.topImages[0];
        product.title = this.goods.title;
        product.desc = this.goods.desc;
        product.price = this.goods.realPrice;
        product.iid = this.iid;
        product.statezzz = false;
        // this.$store.commit('addCart',product)
        this.$store.dispatch('addCart',product).then(res => {
          this.show = true;
          this.message = res;
          console.log(res)
          setTimeout(() => {
            this.show = false;
            this.message = '';
          },1500)
        } )
        // console.log(this.$store.state.cartList)
      }
  }
}
</script>

<style scoped>

#detail{
  position: relative;
  z-index: 10;
  background-color: #fff;
  /* height: 100vh; */
  height: 2000px;
}

.content{
  /* height: calc(100% - 44px); */
  height: 1000px;
}

.detail-nav{
  position: relative;
  z-index: 9;
  background-color: #fff;
}

</style>